<template>
	<view class="list">
		<chat-contact-item
			class="item"
			head="../static/icon_u_contact.png"
			nick="点击发起会话"
			@click.native="quicklyChat"
		></chat-contact-item>
		<chat-contact-item
			class="item"
			head="../static/icon_u_group.png"
			nick="聊天社群"
		></chat-contact-item>
		<chat-contact-item
			class="item"
			head="../static/icon_u_goods.png"
			nick="点赞"
		></chat-contact-item>
		<view class="divider"></view>
		<uni-swipe-action>
			<uni-swipe-action-item
				class="item"
				v-for="(item,index) in conversationList"
				:key="index"
				autoClose
			>
				<chat-contact-item
					head="../static/icon_u_head.jpg"
					:tag="item.unreadCount"
					:nick="item.showName"
					:text="item.lastMessage.elemType === 1 ? (item.lastMessage.elem || item.lastMessage.textElem).text : '[媒体消息]'"
					:time="new Date(new Date().getTime() - item.lastMessage.timestamp).toString('HH:mm')"
					@click="toChat(item)"
				></chat-contact-item>
				<template v-slot:right>
					<view class="del-btn" @click="doDeleteItem(item)">
						<text>删除</text>
					</view>
				</template>
			</uni-swipe-action-item>
		</uni-swipe-action>
		<!-- <chat-contact-item
			v-for="(item,index) in conversationList"
			:key="index"
			class="item"
			head="../static/icon_u_head.jpg"
			:tag="item.unreadCount"
			:nick="item.showName"
			:text="item.lastMessage.elemType === 1 ? (item.lastMessage.elem || item.lastMessage.textElem).text : '[媒体消息]'"
			:time="new Date(new Date().getTime() - item.lastMessage.timestamp).toString('HH:mm')"
			@click="toChat(item)"
		></chat-contact-item> -->
	</view>
</template>

<script>
	import '../uni_modules/uni-swipe-action/components/uni-swipe-action/uni-swipe-action'
	import _ from 'lodash'
	export default {
		data() {
			return {
				talkLog: [],
				nextSeq: 0,
				conversationList: [],
				currentChatId: ''
			}
		},
		async mounted () {
			uni.setNavigationBarTitle({
				title: this.$imUtils.getCurrentUser()
			})
			// 初始化会话列表并且监听会话列表变化
			this.$txim.$on('onNewConversation', this.onConversationHandler)
			this.$txim.$on('onConversationChanged', this.onConversationHandler)
			// 监听新的消息
			this.$txim.$on('onRecvC2CTextMessage', this.onRecvMessageHanlder)
			this.$txim.$on('onRecvC2CCustomMessage', this.onRecvMessageHanlder)
			this.$txim.$on('onRecvGroupTextMessage', this.onRecvMessageHanlder)
			this.$txim.$on('onRecvGroupCustomMessage', this.onRecvMessageHanlder)
			this.$txim.$on('onRecvNewMessage', this.onRecvMessageHanlder)
			this.getConversationList()
		},
		onShow () {
			this.currentChatId = ''
		},
		methods: {
			async getConversationList () {
				let { data } = await this.$txim.getConversationList(this.nextSeq, 999)
				this.nextSeq = data.nextSeq
				data.conversationList = data.conversationList || data.conversations
				let conversationList = data.conversationList.sort((a,b) => b.lastMessage.timestamp - a.lastMessage.timestamp)
				this.conversationList = conversationList
			},
			async onConversationHandler ({ data }) {
				for (let item of data) {
					let index = this.conversationList.findIndex(R => R.conversationID === item.conversationID)
					if (index >= 0) {
						this.conversationList.splice(index, 1, item)
					} else {
						this.conversationList.push(item)
					}
				}
			},
			async onRecvMessageHanlder({ data }) {
				console.log(data)
				// TODO 这里其实是有bug的，群组不能这样判断C2C
				let isC2C = !!(data.sender.userID || data.sender)
				let sender = data.sender.userID || data.sender.groupID
				if (this.currentChatId == sender) {
					isC2C ? this.$txim.markC2CMessageAsRead(sender)
						  : this.$txim.markGroupMessageAsRead(sender)
				}
			},
			toChat: _.debounce(async function (item) {
				let isC2C = !!item.userID
				let chatId = isC2C ? item.userID : item.groupID
				isC2C ? this.$txim.markC2CMessageAsRead(chatId)
					  : this.$txim.markGroupMessageAsRead(chatId)
				this.currentChatId = chatId
				uni.navigateTo({
					url: './singleChat?receiver=' + chatId
				})
			}, 500, { leading: true, trailing: false }),
			quicklyChat () {
				plus.nativeUI.prompt('请输入对方的UserId', ret => {
					let { value } = ret
					if (value && parseFloat(value)) {
						uni.navigateTo({
							url: './singleChat?receiver=' + value
						})
					}
				})
			},
			doDeleteItem: _.debounce(async function(item) {
				let index = this.conversationList.findIndex(R => R.conversationID == item.conversationID)
				this.$txim.deleteConversation(item.conversationID)
				this.conversationList.splice(index, 1)
			}, 500, { leading: true, trailing: false })
		},
	}
</script>

<style lang="scss">
	@import "../components/common";
	.list {
		.item {
			.del-btn {
				line-height: 68px;
				padding: 0 30px;
				color: $c-white;
				background-color: $c-red;
			}
		}
		.divider {
			margin-top: -1px;
			border-top: 1px solid $br-color;
		}
	}
</style>
